<style scoped>
  .setStaffRank{
    height: 100%;
    background-color: #f0f0f0;
  }
  .main{
    padding-top: 2.45rem;
  }

  .item{
    padding: .625rem;
    font-size: .75rem;/*px*/
    line-height: 1.25rem;
    background-color: #fff;
    margin-bottom: .25rem;
  }

  .name{
    float: left;
  }
  .rank{
    float: right;
    background-color: #0094db;
    color: #fff;
    border-radius: .125rem;
    padding: 0 .25rem;
    margin-right: .5rem;

  }

  .enter{
    float: right;
  }

  .icon-enter{
    font-size: .8rem;/*px*/
  }
</style>

<!--pop-->
<style scoped>
    .mint-popup{
      width: 100%;
    }
   .pop{
     width: 100%;
     line-height: 2.5rem;
     height: 2.5rem;
     font-size: .75rem;/*px*/
   }

   .popT{
     padding-left: .75rem;
     float: left;
   }
  .icon-duihao{
    float: right;
    font-size: .75rem;/*px*/
    padding-right: .75rem;
    color: #0094db;
  }
</style>
<template>
    <div class="setStaffRank">
        <headNav centerTitle="设置职级" rightTitle="完成" @rightClick="rightClick" @headBack="headBack"></headNav>
         <ul class="main">
           <li class="item fix" @click="rankShow(index)" v-for="(item,index) in passengerSelected" v-show="item.noRank">
             <div class="name">{{item.name}}</div><div class="enter"><i class="iconfont icon-enter"></i></div><div class="rank">{{item.empLevelTxt}}</div>
           </li>
         </ul>
          <mt-popup  v-model="popupVisible" position="bottom">
              <div class="pop fix" v-for="(item,index) in jobTitleRanks" @click="selectRank(index)">
                <div class="popT">{{item.itemTxt}}</div><div class="r" v-show="item.selected"><i class="iconfont icon-duihao"></i></div>
              </div>
          </mt-popup>
    </div>

</template>


<script>
  import headNav from './head.vue'
   export default{
     data(){
       return{
         popupVisible:false,
         index:'',//控制是点击啦哪个人
         arr:[2],
       }
     },
     methods:{
       headBack(){
         this.$router.go(-1);
       },
       rightClick(){

         var num = 0;
           for(var i = 0 ; i<this.passengerSelected.length ; i++){
                if(this.passengerSelected[i].empLevelCode == undefined){
                   alert('还有未设置职级的旅客')
                }else{
                  num++
                }

           }


         if(num == this.passengerSelected.length){
           this.$router.go(-1);
         }


       },
       rankShow(index){
         this.popupVisible = true;
         this.index = index;
       },
       selectRank(index){

           for(var i = 0 ; i<this.jobTitleRanks.length ;i++){
             this.jobTitleRanks[i].selected = false;
           }
           this.jobTitleRanks[index].selected = true;

           this.passengerSelected[this.index].empLevelCode = this.jobTitleRanks[index].itemCode;
           this.passengerSelected[this.index].empLevelTxt = this.jobTitleRanks[index].itemTxt;
           this.popupVisible = false;

       }
     },
     beforeMount(){
       for(var i = 0 ; i<this.passengerSelected.length ;i++){
         if(this.passengerSelected[i].empLevelCode == undefined || this.passengerSelected[i].empLevelCode == ''){
           this.passengerSelected[i].noRank = true;
         }else{
           this.passengerSelected[i].noRank = false;
         }
       }
     },
     mounted(){
      /* console.log(this.jobTitleRanks);
       console.log(this.passengerSelected)
       console.log(1)
*/




     },
     computed:{
       passengerSelected(){
         return this.$store.state.passengerSelected
       },
       jobTitleRanks(){
         return this.$store.state.jobTitleRanks
       },
     },
     components:{headNav}

   }
</script>
